<template>
  <div class="gutter-example">
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">col-6</div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">col-6</div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">col-6</div>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">col-6</div>
        </a-col>
      </a-row>
	  <a-image
	  					:width="200"
	  					src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
	  />
    </div>
</template>

<style>
@media (min-width: 1024px) {
	.gutter-example {
		padding: 10px 10px;
	}
	.gutter-example :deep(.ant-row > div) {
		background: transparent;
		border: 0;
	}
	.gutter-box {
		background: #00a0e9;
		padding: 5px 0;
	}
}
</style>
